*{
    padding:0;
    margin:0;
    box-sizing:border-box;
  }
  *::after{
    box-sizing:border-box;
  }
  *::before{
    box-sizing:border-box;
  }
  
  body{
    display:flex;
    flex-direction: column;
     height:100vh;
  }
  
  .code-wrapper{
    flex:1;
    height:50%;
   
  }

  #code{
    height:100%;
    overflow: scroll;
  }
  
  .prewview-wrapper{
    flex:1;
    height:50%;
  }
  .preview{
    height:100%;
    display: flex;
    justify-content:center;
    align-items:center;
  }

  .wrapper{
    width:100%;
    height:182px;
    position: relative;
    
  }

.buttons{
  position: absolute;
  top:0;
  right:0;
  display: flex;
  flex-direction: column;
}
.buttons > button{
  padding: 8px 10px;
  flex:1;
  font-size: 16px;
  margin: 10px  20px;
  border-radius: 3px;
  background: rgb(201, 198, 198);
  border:none;
}

.buttons > button.active{
 background: rgb(131, 129, 129);
 box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

.buttons > button:focus{
  outline:none;
}